require(['./config'], () => {
  require(['jquery', 'artTemplate', 'loadHeaderFooter', 'jquery.cookie'], ($, template) => {
    // 加载推荐商品数据
    $.ajax({
      url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds',
      method: 'GET',
      data: {
        start: 20,
        sort: 0
      }
    }).done((resData) => {
      // 利用模板引擎渲染商品数据
      const html = template('product-template', {products: resData.data.list})
      // 显示渲染结果
      $('.home').html(html)
    })

    // 为每个商品项绑定点击事件，跳转到详情页面
    // 利用编程式的导航实现页面跳转
    $('.home').on('click', '.product-item', e => {
      const id = $(e.currentTarget).data('id')
      location.href = '/html/detail.html?id=' + id
    })

    // 为"加入购物车"按钮绑定点击事件
    // 加入购物车：将当前选购的商品信息保存到存储结构中。
    // 使用数组来保存选购的商品信息，每件选购的商品以对象
    // 的方式来保存具体商品数据，将保存商品信息的数组存储
    // 到本地 cookie 中以实现多页面间的购物车商品数据传递
    // 商品：{id, title, price, image, amount}
    $('.home').on('click', '.add-to-cart', e => {
      // 阻止事件传播
      e.stopPropagation()
      console.log('target:', $(e.currentTarget).parents('.product-item').data('prod'))
      // 当前整个商品对象
      const {id, title, price, image} = $(e.currentTarget).parents('.product-item').data('prod')
      // 构建当前选购商品需要保存的对象信息
      const currentProduct = {
        id,
        title,
        price,
        image,
        amount: 1
      }

      // 从本地存储中读取保存的购物车数组，如果没有，则创建空数组
      // const cart = $.cookie('cart') ? JSON.parse($.cookie('cart')) : []
      const cart = JSON.parse(localStorage.getItem('cart')) || []

      // 判断在购物车中是否已保存当前选购的商品信息
      // 如果存在，则说明之前已经选购过，则叠加数量即可
      // 如果不存在，则添加到数组中即可
      const index = cart.findIndex(prod => prod.id === currentProduct.id)
      if (index !== -1) {
        cart[index].amount += 1
      } else {
        cart.push(currentProduct)
      }
      // const prod = cart.find(prod => prod.id === currentProduct.id)
      // if (prod) {
      //   prod.amount += 1
      // } else {
      //   cart.push(currentProduct)
      // }
      
      // const has = cart.some(prod => prod.id === currentProduct.id)
      // if (has) { // 存在，则叠加数量
      //   cart.forEach(prod => {
      //     if (prod.id === currentProduct.id) {
      //       prod.amount += 1
      //     }
      //   })
      // } else { // 将当前选购的商品信息保存到数组中
      //   cart.push(currentProduct)
      // }
      
      // 将数组保存到 cookie 中，因为 cookie 中保存的是文本字符串
      // 的数据，所以将 cart 数组使用 JSON.stringify() 序列化（转换为JSON字符串）
      // $.cookie('cart', JSON.stringify(cart), {expires: 7})

      // 保存到 localStorage 中
      localStorage.setItem('cart', JSON.stringify(cart))

      // return false
    })
  })
})
